<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<polymer-element name="design-preview" attributes="htmlContent">
<script>

Polymer({

  htmlContent: '',
  
  writeToDoc: function(doc) {
    doc.open('text/html', '');
    doc.write(this.outputPreviewHTML());
    doc.close();
  },

  writeSourceToDoc: function(doc) {
    doc.open('text/html', '');
    doc.write(this.outputSourceHTML());
    doc.close();
  },

  outputSourceHTML: function() {
    var html = '<!DOCTYPE html>\n';
    html += '<head>\n';
    html += '<title>Preview</title>\n'
    html += '<base href="' + document.baseURI + '">\n';
    // include base scripts
    // style
    html += '<style>\n';
    html += '  body {\n';
    html += '    margin: 0; height: 100%; background: black;\n';
    html += '    -webkit-tap-highlight-color: rgba(0,0,0,0);\n';
    html += '  }\n';
    html += '</style>\n';
    html += '<script src="https://google-code-prettify.googlecode.com/' +
      'svn/loader/run_prettify.js?skin=sunburst"></s' + 'cript>';
    html += '</head>\n<body>';
    html += '<pre class="prettyprint" ' +
      'style="font-size: 16px; margin: 0; border-radius: 0;">';
    // include content
    html += this.outputPreviewHTML().replace(/\</g, '&lt;')
      .replace(/\>/g, '&gt;');
    html += '\n</pre>';
    html += '</body>\n</html>';
    return html;
  },

  outputPreviewHTML: function() {
    var url = new URL(document.baseURI);
    var path = url.pathname.split('/');
    path.pop();
    path = path.join('/');
    path += '/components/element/';
    url = '//' + url.host + path;
    // put base href in head
    var h = '<base href="' + url + '">\n';
    return this.makeOutputHTML(h, this.htmlContent);
  },

  makeLink: function(html) {
    return 'data:text/html;base64,' + btoa(html);
  },

  makeOutputHTML: function(head, body) {
    var html = '<!DOCTYPE html>\n';
    html += '<title>Preview</title>\n';
    html += '<meta name="viewport" content="width=device-width, ' + 
        'initial-scale=1.0, maximum-scale=1.0">\n';
    html += '<meta name="mobile-web-app-capable" content="yes">\n';
    html += head || '';
    // include base scripts
    html += '<script src="../platform/platform.js"></s' + 'cript>\n';
    // style
    html += '<style>\n';
    html += '  html { height: 100% }\n';
    html += '  body {\n';
    html += '    margin: 0;\n';
    // transform causes body to be offsetParent, which means it must be sized
    // body has transform to avoid the 'blinking bug'
    // https://code.google.com/p/chromium/issues/detail?id=332024
    html += '    height: 100%;\n';
    html += '    transform: translateZ(0);\n';
    html += '    -webkit-transform: translateZ(0);\n';
    html += '    font-size: 14px;\n';
    html += '    font-family: "Helvetica Neue", "Roboto", "Arial", sans-serif;\n';
    html += '    -webkit-tap-highlight-color: rgba(0,0,0,0);\n';
    html += '  }\n';
    html += '</style>\n';
    // include content
    html += body || '';
    return html;
  }

});

</script>
</polymer-element>

<polymer-element name="design-preview-iframe" extends="design-preview">
<template>
  <style>
    #output {
      display: block; 
      width: 100%;
      height: 100%;
      border: 0;
    }
  </style>
  <iframe id="output"></iframe>
</template>
<script>

Polymer({

  htmlContentChanged: function() {
    //this.$.output.src = this.makeLink(this.outputPreviewHTML());
    this.writeToDoc(this.$.output.contentDocument);
  }

});

</script>
</polymer-element>

<polymer-element name="design-preview-window" extends="design-preview">
<script>
(function() {

Polymer({

  windowName: 'preview', 

  prepareWindow: function() {
    if (this.previewWindow) {
      this.previewWindow.close();
    }
    this.previewWindow = window.open(this.windowName, '', null, false);
  },

  open: function(source) {
    this.htmlContent = source;
    this.prepareWindow();
    this.writeToDoc(this.previewWindow.document);
  },

  openSource: function(source) {
    this.htmlContent = source;
    this.prepareWindow();
    this.writeSourceToDoc(this.previewWindow.document);
  }
});

})();
</script>
</polymer-element>